<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="css/1.css">
  <title>Document</title>
</head>
<body>
  <div id="abc" class="abc">
    <div class="card1">
      <p><span>姓名：</span><input class="input" type="text" v-model="names"></p>
      <p><span>年龄：</span><input class="input" type="number" v-model="ages"></p>
      <p><span>性别：</span><input class="input" type="text" v-model="sexs"></p>
      <p><span>语文：</span><input class="input" type="number" v-model="chineses"></p>
      <p><span>数学：</span><input class="input" type="number" v-model="maths"></p>
      <p><span>英语：</span><input class="input" type="number" v-model="englishs"></p>
      <button @click="Add">添加</button>
    </div>
      <div class="card" v-for="item in data">
          <ul >
              <li>
                  <img :src="item.image"  >
                  <p><span>姓名：</span>{{item.name}}</p>
                  <p><span>年龄：</span>{{item.age}}</p>
                  <p><span>性别：</span>{{item.sex}}</p>
                  <p><span>总分</span>{{item.chinese+item.math+item.english}}</p>
              </li>
          </ul>
          <div v-if="item.chinese>60&&item.math>60&&item.english>60">
              <div class="button"><span>...</span></div>
                  <div class="hide">
                      <div class="hide-content">
                          <span>语文：{{item.chinese}}</span>
                          <span>数学：{{item.math}}</span>
                          <span>英语：{{item.english}}</span>
                      </div>
                  </div>
            </div>
      </div>
  </div>
</body>
<script src="https://unpkg.com/vue@next"></script>
<script>
  const Abc={
      data(){
          return{
            data:[  
                    { image: "img/1.png", name: "张三", age: 20, sex: "女", chinese: 70, math: 80, english: 80 },
                    { image: "img/2.png", name: "李四", age: 20, sex: "女", chinese: 80, math: 80, english: 90 },
                    { image: "img/3.png", name: "王五", age: 20, sex: "女", chinese: 70, math: 70, english: 80 } 
          ]
          }
      },
      methods:{
        Add:function(){
              this.data.push({
                image: "img/3.png",
                name:this.names,
                age:this.ages,
                sex:this.sexs,
                chinese:this.chineses,
                math:this.maths,
                english:this.englishs
              })
        }
      }
  }
  Vue.createApp(Abc).mount('#abc')
</script>
</html>